<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PayMent-Card</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <link rel="stylesheet" href="{{ asset('style/plugins/sui-mobile/css/sm.min.css') }}">
    <link rel="stylesheet" href="{{ asset('style/plugins/sui-mobile/css/sm-extend.min.css') }}">
    <link rel="stylesheet" href="{{ asset('style/plugins/fontawesome/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('style/plugins/fixedsticky/fixedsticky.css') }}">
    <link rel="stylesheet" href="{{ asset('style/shopWx/css/main.css') }}">
    <link rel="stylesheet" href="{{ asset('style/shopWx/css/man.css') }}">
    <style>
        .StripeElement {
            background-color: white;
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid transparent;
            box-shadow: 0 1px 3px 0 #e6ebf1;
            -webkit-transition: box-shadow 150ms ease;
            transition: box-shadow 150ms ease;
        }

        .StripeElement--focus {
            box-shadow: 0 1px 3px 0 #cfd7df;
        }

        .StripeElement--invalid {
            border-color: #fa755a;
        }

        .StripeElement--webkit-autofill {
            background-color: #fefde5 !important;
        }
    </style>

</head>
<body>
<div class="page-group">
    <div class="page page-current" id="payment-card">
        <div class="content check-content">
            <div class="content-block-title">-DEV-利用可能なクレジット: </div>
            <div class="content-block-title">VISA、マスターカード、American Express</div>
            <div class="list-block">
                <ul>
                    <form action="/charge" method="post" id="payment-form">
                        {!! csrf_field() !!}
                        <input type="hidden" name="url" value="{{ action('TestPaymentController@postPayStripe') }}">
                        <input type="hidden" name="code" value="{{ $secret }}">
                        <div class="form-row">
                            <div id="card-element">
                                <!-- a Stripe Element will be inserted here. -->
                            </div>

                            <!-- Used to display form errors -->
                            <div id="card-errors" role="alert"></div>
                        </div>
                    </form>
                </ul>
            </div>
            <div class="content-block">
                <p><a href="#" class="button button-big button-fill button-success" style="color: #000000" id="stripeSubmit">お支払確定　{{ $money }} 円</a></p>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='{{ asset('style/plugins/zepto/zepto.min.js') }}' charset='utf-8'></script>
<script type='text/javascript' src='{{ asset('style/plugins/sui-mobile/js/sm.min.js') }}' charset='utf-8'></script>
<script type='text/javascript' src='{{ asset('style/plugins/sui-mobile/js/sm-extend.min.js') }}' charset='utf-8'></script>
<script src="https://js.stripe.com/v3/"></script>
<script type='text/javascript' src='{{ asset('style/shopWx/js/payment-dev.js') }}' charset='utf-8'></script>
</body>
</html>